<template>
    <div class="srbd">
        <div class="bd">
            <div class="cesaun_container">
                <h3 class="title">

                    <p class="line">每日一占</p>
                </h3>
                <div>
                    <div style="text-align: center">
                        <p style="padding: 20px">
                            卜卦方法：静默一分钟，心念集中于你所测之事，如爱情、事业、健康等，然后心念一动，点击立即摇卦，并查看卦辞，请自行体会其中的吉凶指示。
                        </p>
                        <div style="display: flex; gap: 10px; justify-content: center">
                            <img src="@/assets/image/taiji.gif" style="width: 83px; height: 87px" alt="" />
                        </div>

                        <p style="padding: 20px">
                            每日占卜：缘份居每日占卜使用小六壬占卜法，什么时候停止摇卦，全凭自己心念之所至，六壬摇卦，贵在随机而动，占卜方能感应所求。
                        </p>
                    </div>
                </div>
                <div style="text-align: center">
                    <el-button type="primary" @click="submitForm" style="margin: 20px">测算</el-button>
                </div>

                <!-- 主体表单 -->
            </div>
            <div>
                <h3 class="title">
                    <p class="line">测算简介</p>
                </h3>
                <div style="font-size: 14px; margin: 0 10px 20px 10px">
                    <p style="">
                        1.小六壬占卜，古代中国占卜法之一，俗称报时起课法，后世亦传有简易随机数起卦法，缘份居每日占卜即本于此。
                    </p>
                    <p>2.不急不占，无事不占，不动不占。</p>

                    <p>2.心诚则灵，测算结果仅供参考。</p>
                </div>
            </div>
        </div>
        <el-dialog title="测算结果" :visible.sync="centerDialogVisible" width="50%" class="dialog_cesuan">
            <div class="bazi_info" v-if="result != null">
                <div class="base_info">
                    <div class="show">
                        <span class="l">您抽随机数 {{ result.id }} :</span>
                        <span class="r">{{ result.number }}</span>
                    </div>
                    <div class="show">
                        <span class="l">卦名:</span>
                        <span class="r">{{ result.guaming }}</span>
                    </div>
                    <div class="show">
                        <span class="l">凶吉:</span>
                        <span class="r">{{ result.description["凶吉"] }}</span>
                    </div>
                    <div class="show">
                        <span class="l">卦曰:</span>
                        <span class="r">{{ result.description["卦曰"] }}</span>
                    </div>
                    <div class="show">
                        <span class="l">解卦:</span>
                        <span class="r">{{ result.description["解曰"] }}</span>
                    </div>
                </div>

                <div class="base_info">
                    <div class="details">
                        <div class="names">
                            <span>运势:</span>
                        </div>
                        <div class="des">
                            <span class="des_deta">{{ result.description["运势"] }}</span>
                        </div>
                    </div>
                    <div class="details">
                        <div class="names">
                            <span>财富:</span>
                        </div>
                        <div class="des">
                            <span class="des_deta">{{ result.description["财富"] }}</span>
                        </div>
                    </div>

                    <div class="details">
                        <div class="names">
                            <span>感情:</span>
                        </div>
                        <div class="des">
                            <span class="des_deta">{{ result.description["感情"] }}</span>
                        </div>
                    </div>
                    <div class="details">
                        <div class="names">
                            <span>事业:</span>
                        </div>
                        <div class="des">
                            <span class="des_deta">{{ result.description["事业"] }}</span>
                        </div>
                    </div>
                    <div class="details">
                        <div class="names">
                            <span>身体:</span>
                        </div>
                        <div class="des">
                            <span class="des_deta">{{ result.description["身体"] }}</span>
                        </div>
                    </div>
                    <div class="details">
                        <div class="names">
                            <span>神鬼:</span>
                        </div>
                        <div class="des">
                            <span class="des_deta">{{ result.description["神鬼"] }}</span>
                        </div>
                    </div>
                </div>
                <div class="yl">
                    <span>仅供娱乐！请勿当真</span>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    computed: {
        currentPath() {
            return this.$route.path; // 获取当前路由路径
        },
    },
    data() {
        return {
            centerDialogVisible: false,
            birthday: "",

            result: {
                number: 343, //掷出随机数 343
                guaming: "留连", //卦名
                description: {
                    卦曰: "卒未归时，属水元武，谋事二八十，贵人南方，冲犯北方，大人乌面夫人，小孩游路亡魂。", //卦曰
                    解曰: "留连事难成，求谋日未明，官事凡宜缓，去者未回程，失物南方见，急讨方心称，更须防口舌，人口且平平。", //解曰
                    凶吉: "卜到留连，属凶卦，代表凡事阻碍、迟滞，此卦更不宜有过大动作，凡事宜守。", //吉凶
                    运势: "目前运势低迷，心情不开朗，凡事受阻。", //运势
                    财富: "求财不可得，此为破财之卦，且有被人影响破财之现象。", //财富
                    感情: "双方沟通不良、冷战、或者一方过于强势，感情不得平衡。", //感情
                    事业: "被上司盯或者被人扯后腿，小人之卦。", //事业
                    身体: "肠胃不舒服或者精神压力太大所得之病。", //身体
                    神鬼: "小孩子主要被过路游魂所煞到，大人为冲犯女性鬼神。", //神鬼
                    行人: "人平安，但目前仍流连忘返。", //行人
                },
            },
            area: "",
            form: {
                shuzi: "",
            },
        };
    },
    mounted() { },
    methods: {
        submitForm() {
            this.form["api_key"] = "FNcQHQuf0W8wDrXMjWc0xqTzw";
            let config = {
                headers: {
                    "Content-Type": "application/x-www-form-urlencoded",
                },
            };
            this.$axios
                .post(window.config.apiUrl + "/v1/Zhanbu/meiri", this.form, config)

                .then((res) => {
                    if (res.data.errcode == -1) {
                        this.$message({
                            type: "warning",

                            message: res.data.errmsg,
                        });

                        return;
                    }

                    this.centerDialogVisible = true;
                    this.result = res.data.data;
                    console.log(this.result);
                });
        },
    },
};
</script>

<style scoped lang="scss">
.bd {
    border: 1px solid #e5e5e5;
}

.cesaun_container {}

::v-deep .el-card.is-always-shadow {
    box-shadow: none !important;
}

::v-deep .el-card__header {
    padding: 10px 20px !important;
}

.form-card {
    width: 100%;
    margin: 0 auto;
    border-radius: 2px;
}

.form-title {
    margin: 0;
    color: #303133;
    font-size: 16px;
    text-align: left;
}

.el-form-item {
    margin-bottom: 22px;
}

.el-radio {
    margin-right: 30px;
}

::v-deep .distpicker-address-wrapper {
    width: 100% !important;
}

@mixin flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    height: 45px;
}

@mixin tr1_w {
    width: 33px;
    text-align: center;
}

.dialog_cesuan {
    .bazi_info {
        height: 85vh;
        overflow-y: auto;
        padding: 20px;
        background-color: #fff;

        .base_info {
            margin: 20px;

            .title {
                display: flex;
                padding: 5px;

                .shu {
                    width: 5px;
                    height: 20px;
                    background-color: #e6a84b;
                    border-radius: 10px;
                }

                .ti {
                    padding-left: 8px;
                    font-weight: 800;
                    font-size: 15px;
                }
            }

            .show {
                margin-top: 15px;

                .l_ {
                    font-size: 14px;
                    display: inline-block;
                    min-width: 50px;
                    font-weight: 800;
                }

                .l {
                    font-size: 15px;
                    display: inline-block;
                    min-width: 50px;
                    font-weight: 800;
                }
            }

            .details {
                border: 1px solid #e5e5e5;
                border-bottom: none;
                margin-top: 20px;

                .names {
                    text-align: center;
                    color: #e6a84b;
                    border-bottom: 1px solid #e5e5e5;
                    color: #e6a84b;
                    font-weight: 800;
                    background-color: #fff3ef;
                    height: 50px;
                    line-height: 50px;
                }

                .des {
                    border-bottom: 1px solid #e5e5e5;
                    padding-left: 10px;
                    display: flex;
                    align-items: center;

                    .des_text {
                        color: #e6a84b;
                        width: 14%;
                        font-weight: 800;
                        user-select: text;
                    }

                    .des_deta {
                        width: 85%;
                        line-height: 26px;
                        text-indent: 2em;
                        user-select: text;
                    }
                }
            }
        }
    }
}
</style>